<template>
	<view class="page">
		<view class="header bac-color-fff">
			<view
				url="/pages/user/setting" 
				hover-class="none"
				open-type="navigate"
				class=" flex align-center ">
				<image class="avator bac-color-normal" :src="user_info.avatar" v-if="user_info"></image>
				<view class="avator bac-color-normal" v-else></view>
				<view class="flex-1 mar-l-12">
					<view class="user-name mar-b-10" v-if="user_info.nickname">
						<text class="font-size-18 font-bold font-color-333">{{user_info.nickname||''}}</text>
					</view>
					<view class="user-mobile">
						<text class="font-size-14 font-color-a1">{{user_info.mobile||''}}</text>
					</view>
				</view>
				<view>
					<text v-if="user_info.type" class="font-color-666 font-size-15">{{user_info.type =='counselor'?'咨询师':'会员'}}</text>
				</view>
				<!-- <view class="">
					<mk-icon :src="''" :height="16" :width="16"></mk-icon>
				</view> -->
			</view>
			<navigator url="/pages/score/store" 
				hover-class="none"
				open-type="navigate"
				 class="mar-t-20 user-score flex align-center">
				<view class="flex-1">
					<view class="current-score">
						<view class="dis-inline-block font-size-15">当前积分</view>
						<view class="mar-l-15 dis-inline-block font-size-15">{{user_info.score}}</view>
					</view>
					<view class="get-score mar-t-10 font-size-14">阅读、评价得积分兑换好礼</view>
				</view>
				<view class="flex align-center">
					<text class="font-color-score font-size-13">进入积分商城</text>
					<text class="iconfont icon-youjiantou font-color-score font-size-11 mar-l-3"></text>
					<!-- <mk-icon :src="''" :height="16" :width="16"></mk-icon> -->
				</view>
			</navigator>
		</view>
		

        <!-- 金刚区 -->
		<view class="district flex mar-t-13 text-center bac-color-fff " v-if="user_info.type && user_info.type=='counselor'">
			<navigator 
				url="/pages/counselor/order" 
				hover-class="none"
				open-type="navigate"
				 class="flex-1 flex flex-column align-center">
				<image class="dis-icon" src="@/static/icons/wdyy.png"></image>
				<view class="mar-t-3"><text class="font-color-000 font-size-15 ">我的服务</text></view>
			</navigator>
			<navigator class="flex-1 flex flex-column align-center"
				url="/pages/message/courselor/index" 
				hover-class="none"
				open-type="navigate"
			>
				<image class="dis-icon" src="@/static/icons/wdxx.png"></image>
				<view class="mar-t-3"><text class="font-color-000 font-size-15 ">咨询信息</text></view>
			</navigator>
			<navigator url="/pages/counselor/evaluate" class="flex-1 flex flex-column align-center">
				<image class="dis-icon" src="@/static/icons/wdsc.png"></image>
				<view class="mar-t-3"><text class="font-color-000 font-size-15 ">我的评价</text></view>
			</navigator>
			<navigator 
				url="/pages/help/index" 
				hover-class="none"
				open-type="navigate" class="flex-1 flex flex-column align-center">
				<image class="dis-icon" src="@/static/icons/syzn.png"></image>
				<view class="mar-t-3"><text class="font-color-000 font-size-15 ">使用指南</text></view>
			</navigator>
		</view>
		<!-- 金刚区结束-->
		
		<!-- 会员金刚区 -->
		<view class="district flex mar-t-13 text-center bac-color-fff " v-else>
			<navigator 
				url="/pages/order/index" 
				hover-class="none"
				open-type="navigate"
				 class="flex-1 flex flex-column align-center">
				<image class="dis-icon" src="@/static/icons/wdyy.png"></image>
				<view class="mar-t-3"><text class="font-color-000 font-size-15 ">我的预约</text></view>
			</navigator>
			<navigator
				url="/pages/message/user/index" 
				hover-class="none"
				open-type="navigate"
				class="flex-1 flex flex-column align-center">
				<image class="dis-icon" src="@/static/icons/wdxx.png"></image>
				<view class="mar-t-3"><text class="font-color-000 font-size-15 ">我的消息</text></view>
			</navigator>
			<navigator url="/pages/user/follow" class="flex-1 flex flex-column align-center">
				<image class="dis-icon" src="@/static/icons/wdsc.png"></image>
				<view class="mar-t-3"><text class="font-color-000 font-size-15 ">我的收藏</text></view>
			</navigator>
			<navigator 
				url="/pages/help/index" 
				hover-class="none"
				open-type="navigate" class="flex-1 flex flex-column align-center">
				<image class="dis-icon" src="@/static/icons/syzn.png"></image>
				<view class="mar-t-3"><text class="font-color-000 font-size-15 ">使用指南</text></view>
			</navigator>
		</view>
		<!-- 金刚区结束-->

        <!-- 列表启动栏 -->
        <view class="list-start-card bac-color-fff mar-t-13 font-size-15 font-color-000 ">
            <navigator url="/pages/kefu/kefu" class="start-item flex align-center">
                <image src="@/static/icons/user/kefu.png" class="start-icon"></image>
                <view class="mar-l-10 flex-1"><text>客服</text></view>
               	<mk-icon :src="''" :height="16" :width="16"></mk-icon>
            </navigator>
            <view class="start-item flex align-center border-t-1" @click="callUs">
				<image src="@/static/icons/user/bangzhu.png" class="start-icon"></image>
                <view class="mar-l-10 flex-1 "><text>联系我们</text></view>
                <mk-icon :src="''" :height="16" :width="16"></mk-icon>
            </view>
        </view>
        <!-- 列表启动栏结束 -->
	</view>
</template>

<script>
import {getUserInfo} from '@/utils/http'
export default {
	data(){
		return {
			user_info:'',
		}
	},
	methods:{
		callUs(){
			const phone = '0577-68682899'
			if(uni.getStorageSync('storage_key') == 'h5'){
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			}else{
				ZWJSBridge.phoneCall({
					corpId:phone
				}).then((result) => {
					console.log(result);
				}).catch((error) => {
					console.log(error);
				});
			}
		}
	},
	onLoad(){
		
	},
	onShow(){
		if(!uni.getStorageSync('user_info')){
			uni.navigateTo({
				url:'/pages/login/index'
			})
			return
		}
		getUserInfo().then(res=>{
            if(res){
                this.user_info = res
                uni.setStorageSync('user_info', res)
                this.store.commit('fn_set_user_info',res)
            }
        })
	}
}
</script>
<style scoped>
page {
	background-color: #f4f5fa;
}
.header {
	padding: 10px 20px 15px 20px;
}
.header .avator {
	height: 140rpx;
	width: 140rpx;
	border-radius: 50%;
}
.header .left {
	height: 0.61em;
	color: #d0d0d0;
}
.header .user-score{
	/* background: linear-gradient(to bottom, #f39303, #dfaa0c); */
	/* background: linear-gradient(to bottom, #0096f3, #0ea1df); */
	background: linear-gradient(to bottom, #000000, #032736);
	border-radius: 8px;
	padding:12px 20px;
}
.header .current-score{
	color: #FFECD7;
}
.header .get-score{
	color: #FFECD7;
}
.font-color-score{
	color: #FFECD7;
}
.font-color-a1{
    color: #a1a1a2;
}

.district{
    padding-top: 40rpx;
    padding-bottom: 40rpx;
}
.district .dis-icon{
	height: 80rpx;
	width: 80rpx;
	/* background-color: #cccccc; */
	text-align: center;
}

.list-start-card{
    padding: 12px 21px;
    font-size: 0.89em;
}
.start-item{
	height: 100rpx;
	padding-top: 10rpx;
	padding-bottom: 10rpx;
}
.start-icon{
    height: 66rpx;
    width: 66rpx;
}
</style>